<template>
  <div >
    <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        router
      >
    <el-menu-item index="/Home">首页</el-menu-item>
    <el-menu-item index="1" >直播</el-menu-item>
    <el-menu-item index="1" >分类</el-menu-item>
<el-menu-item :disabled="true" id="el-menu-item-placeholder1"></el-menu-item>
<el-menu-item id="el-menu-item-searchinput-container" :disabled="true">
    <el-input v-model="input" placeholder="搜索栏"></el-input>
</el-menu-item>

<el-menu-item index="2">历史</el-menu-item>
<el-menu-item index="3">我要直播</el-menu-item>
<el-menu-item index="3">消息</el-menu-item>
<el-menu-item index="3">关注</el-menu-item>
<!-- 用户 -->
<el-submenu index="7">
          <template slot="title">
            <el-image>
              <div slot="error" class="image-slot">
                <el-image
                  style="width: 30px; height: 30px"
                  src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  fit="fit"
                ></el-image>
              </div>
            </el-image>
          </template>
          <el-menu-item class="el-menu-item-user-currentuser">
            <div class="currentuser currentuser-info">
              <el-row>
                <el-col>
                  <el-card :body-style="{ padding: '0px' }">
                    <div style="width: 130px; margin: auto">
                      <img
                        height="130px"
                        width="130px"
                        src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                        class="image"
                      />
                    </div>
                    <div style="width: 130px; height: 130px; margin: auto">
                      <span>壮壮</span>
                      <div style="width: 130px; height: 130px; margin: auto">
                        <el-button type="text">登录</el-button>
                        <el-button
                          @click="dialogRegisterVisible = true"
                          type="text"
                          >快速注册</el-button
                        >
                        <el-button type="text">退出</el-button>
                      </div>
                    </div>
                    <div style="padding: 14px">
                      <div class="bottom clearfix">
                        <!-- <time class="time">{{ currentDate }}</time> -->
                        <el-button
                          @click="dialogRegisterVisible = true"
                          type="primary"
                          ><i class="el-icon el-icon-user-solid"></i
                          >个人中心</el-button
                        >
                        <el-button
                          @click="dialogRegisterVisible = true"
                          type="primary"
                          ><i class="el-icon el-icon-star-on"></i
                          >我的关注</el-button
                        >
                        <el-button
                          @click="dialogRegisterVisible = true"
                          type="primary"
                          ><i class="el-icon el-icon-video-camera"></i
                          >我要直播</el-button
                        >
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </div>
          </el-menu-item>
        </el-submenu>
    </el-menu>
<!-- 注册弹窗 -->
    <el-dialog
      title="注册/登录"
      :visible.sync="dialogRegisterVisible"
      width="30%"
    >
      
      <registerUserCompoent ref="registerForm" @on-change-Result="closeDigRegister"></registerUserCompoent>
      <!-- <registerUserCompoent @on-change-Result="changeResultItems" ref="registerChild"></registerUserCompoent> -->
      <span slot="footer" class="dialog-footer">
        <el-button
          style="width: 100%; background-color: #ff5d23"
          type="primary"
          @click="submitForm"
          > 注 册/登 录</el-button
        >
      </span>
    </el-dialog>
</div>
</template>
  <script>
  import registerUserCompoent  from '../components/registerUserCompoent'
 
    export default {
      name:'MenueCom',
      data() {
        return {
          activeIndex: '1',
          activeIndex2: '1',
          dialogRegisterVisible: false
        };
      },
      methods: {
        handleSelect(key, keyPath) {
          console.log(key, keyPath);
        },
        submitForm()
        {
      this.$refs.registerForm.submitRegist() ;
          
        },
        closeDigRegister(dialogRegisterVisible)
        {
         this.dialogRegisterVisible=dialogRegisterVisible;

        }
      },
      components:
      {
        registerUserCompoent

      }
    }
  </script>


<style scoped>
    .el-menu {
        min-width: 800px;
        padding-left: 15px;
        
    }
    #el-menu-item-placeholder1 {
        width: 10%;
        max-width: 400%;
        cursor: default;
    }
    .el-menu > .el-menu-item {
        min-width: 5%;
        padding: 0 5px;
        box-sizing: content-box;
        text-align: center;
    }

    #el-menu-item-searchinput-container {
        cursor: default;
        opacity: 1;
        margin: 0 20px;
    }
    .head-container {
  width: 80%;
  margin: auto;
  height: 100%;
}

/* 导航条演示 */

.menue-div {
  display: inline-block;
  width: 50%;
}

.el-menu-item {
  font-size: 19px;
  /* color: #FF5D23 !important  ; */
}

.el-menu-item:hover {
  font-size: 19px;
  color: #ff5d23 !important  ;
}

.el-submenu__title:hover {
  font-size: 19px;
  color: #ff5d23 !important  ;
}

/* 用户信息样式 */
.menue-div-user {
  float: right;
  display: inline-block;
}

/* 历史 */
.el-menu-item-user-history {
  width: 300px !important;
  height: 80px !important;
  border-radius: 5px;
  padding-bottom: 10px;
}

.el-menu-item-user-history > div {
  margin-top: 10px;
  border-radius: 5px 5px 5px 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 270px !important;
}
.el-menu-item-user-history > div:hover {
  border-radius: 5px 5px 5px 5px;
  width: 270px !important;
  height: 80px !important;
  background-color: #ff5d23 !important;
  color: white;
  padding: 5px;
}

.viewAll {
  width: 270px !important;
  height: 50px !important;
  border-radius: 5px;
  padding-bottom: 10px;
}

.viewAll > div {
  margin-top: 10px;
  border-radius: 5px 5px 5px 5px;
  padding-top: 5px;
  padding-bottom: 5px;
  width: 270px !important;
}

.viewAll > div > button {
  width: 280px !important;
  background-color: #ff5d23 !important;
  border-block-color: #ff5d23 !important;
}

/* 当前用户 */

/* 个人信息 */
.currentuser-info {
  height: 80% !important;
}

.currentuser-info-image {
  margin-left: 50px auto;
}

.currentuser-core {
  height: 20% !important;
}

.currentuser-core > div {
  padding: 3px;
  /* margin-left: 3px; */
  width: 23% !important;
  height: 90% !important;
  display: line !important;
  float: left;
}

.currentuser-core > div > i {
  width: 25% !important;
  height: 90% !important;
  font-size: 30px;
  color: #ff5d23;
  /* background-color: #ff5d23; */
}

.el-menu-item-user-currentuser {
  width: 420px !important;
  height: 200px !important;
  background-color: aqua;
}

.clearfix .el-button {
  background-color: #ff5d23 !important;
  border-color: #ff5d23 !important;
}

.clearfix .el-icon {
  font-size: 20px;
  color: white !important;
  /* background-color: white !important;
   border-color: white !important; */
}

.el-menu-item-user-currentuser div {
  width: 100%;
  border-radius: 5px 5px 5px 5px;
}

.el-menu-item-user-currentuser div:hover {
  /* background-color: #ff5d23; */
  border-radius: 5px 5px 5px 5px;
}
</style>